<template>
  <div class="login-container">
    <div class="login-box">
    <!-- ref：必须属性，后期方便el-form组件获取 -->
    <!-- model：必须属性，对表单全部数据对象进行绑定，后期表单校验会使用 -->
    <!-- label-width：非必须属性，表单项目名称宽度 -->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
      <img src="./logo_index.png" alt="">
      <!-- el-form-item：表单项目组件，每个表单域需通过此组件圈选 -->
      <!-- label：非必需属性，表单项目名称 -->
  <el-form-item prop="mobile">
    <!-- el-input：普通输入框组件 -->
    <!-- v-model：必须属性，双向数据绑定 -->
     <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
        <i slot="prefix" class="iconfont icon-shoujihao"></i>
       </el-input>   
       
    </el-form-item>
    <el-form-item prop="code">
    <el-input v-model="loginForm.code" placeholder="请输入校验码">
      <i slot="prefix" class="iconfont icon-yanzhengma"></i>
    </el-input>
  </el-form-item>
  <el-form-item prop="xieyi" style="text-align:left">
    <el-checkbox v-model="loginForm.xieyi" style="margin-right:10px"></el-checkbox>
    <span>我已阅读并同意用户协议和隐私条款</span>
  </el-form-item>
  <el-form-item>
    <el-button :loading="isActive" :disabled="isActive" type="primary" style="width:100%" @click="login()">登录</el-button>
  </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
//引入极验的文件
import '@/assets/js/gt.js'
import '@/assets/iconfont/iconfont.css'
export default {
  data () {
        // 自定义校验函数，验证协议
    var xieyiTest = function (rule, value, callback) {
      // rule:校验规则，一般不用
      // value:当前被校验的信息
      // callback：回调函数，校验成功或失败都需要执行
      // if (value) {
      //   callback()
      // } else {
      //   return callback(new Error('请无条件遵守规矩'))
      // }

      value ? callback() : callback(new Error('请无条件遵守规矩'))
    }
    return {
      //登录按钮等待禁用状态
      isActive:false,
      //极验窗口对象
      ctaObj:null,
      loginForm: {
        mobile: '18338728956', // 手机号码
        code: '246810',
        xieyi: true
      },
      loginFormRules:{
        //  校验字段：[{规则}]
        mobile:[
          {required: true, message: '请输入手机号码', },
          {pattern: /^1[356789]\d{9}$/, message: '手机号码遵守格式', }
        ],
        code:[
          {required: true, message: '请输入验证码', }
        ],
        xieyi:[
          {validator:xieyiTest}
        ]
      }
    }
  },
  methods: {
    login () {
      // this.$router.push('/home')
      // this.$router.push({name:'home'})
            // 全部表单域项目校验
      // 获得form表单组件的语句: this.$refs.loginFormRef
      // form组件.validate(回调函数)
      // 参数valid：会体现布尔值，表示校验是否成功
      this.$refs.loginFormRef.validate((valid) => {
            // 表单域校验成功
      if (valid) {
        //判断极验窗口是否存在
         if (this.ctaObj !== null) {
        return this.ctaObj.verify()
      }
        //登录按钮禁用等待
        this.isActive=true
        //1 人机交互验证
        //获得人机交互的秘钥信息
        let pro = this.$http.get(`captchas/${this.loginForm.mobile}`)
        pro.then(result=>{
             // 接收处理返回的极验请求秘钥信息
          let { data } = result.data
          //axios请求成功
          //生成极验验证窗口
        window.initGeetest({
            // 以下配置参数来自服务端 SDK
            gt: data.gt,
            challenge: data.challenge,
            offline: !data.success,
            new_captcha: true,
            product:'bind'//隐藏按钮通过登录按钮激活
        }, captchaObj => {
            // 这里可以调用验证实例 captchaObj 的实例方法
            captchaObj.onReady(() => {
              // 验证码ready之后才能调用verify方法显示验证码
              captchaObj.verify() // 显示验证码窗口
              //把窗口对象赋予给ctaobj对象
              this.ctaObj=captchaObj
              //登录按钮状态回复
              this.isActive = false
            }).onSuccess(() => {
              // your code
              // B. 校验账号真实性，登录
              this.loginAct()
            }).onError(() => {
              // your code
            })
          })
        })
        .catch(err=>{
          return this.$message.error('获得人机秘钥信息有误' + err)
        })
        //2 账号真实性检验
        // this.loginAct()
      }
      })
      
    },
    //账号真实性校验
     loginAct(){
        // 账号真实性校验
        var pro = this.$http.post('/authorizations', this.loginForm)
        pro
          .then(result => {
            if (result.data.message === 'OK') {
              // 进入后台系统
              // this.$router.push('/home')
               window.sessionStorage.setItem('userinfo', JSON.stringify(result.data.data))
              this.$router.push('/home')
            }
          })
          .catch(err => {
            this.$message({type:'error', message:'用户名或密码错误',duration:1000})
          })
     }
  }

}
</script>

<style lang="less" scoped>
.login-container{
  // background-color: #000000;
  background:url('./login_bg.jpg');
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box{
  width: 400px;
  height: 340px;
  background-color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  img{
    width: 50%;
    margin: 20px auto;
  }
   .el-form{
    width: 75%;
   }
  }
}

</style>
